<template>
	<view>
		<!-- #ifdef H5 -->
		<view class="container">
			<view class="login_topbpx">
				<view class="login_tit">登录</view>
			</view>
			<view class="tips">
				首次登录快速注册
			</view>
			<view class="main">
				<u--input placeholder="请输入手机号" border="bottom" v-model="phone">
					<text slot="prefix" style="margin-right: 50rpx;">手机号</text>
				</u--input>
			</view>
			<view class="main">
				<u--input placeholder="请输入验证码" border="bottom" v-model="code">
					<text slot="prefix" style="margin-right: 50rpx;">验证码</text>
					<template slot="suffix">
						<u-code
							ref="uCode"
							@change="codeChange"
							seconds="59"
							changeText="X秒重新获取"
						></u-code>
						<u-button
							class="code-btn"
							@tap="getCode"
							:text="tips"
							type="primary"
							shape="circle"
							:plain="true"
						></u-button>
					</template>
				</u--input>
			</view>
			<view style="display: flex; justify-content: flex-end; font-size: 20rpx; color: #666666;">收不到验证码？</view>
			<view class="wrap">
				<u-button shape="circle" @tap="login" type="primary">登录</u-button>
			</view>
			<view style="display: flex;color: #666666;font-size: 15rpx; justify-content: center;">
				<u-checkbox-group>
					<u-checkbox v-model="checked" shape="circle" label="我已阅读并接受" @change="checkedChange"></u-checkbox>
				</u-checkbox-group>

				<text @click="yszc()" style="color: #0099ff; font-size: 15px;">《隐私政策》</text>
			</view>
		</view>
		<!-- #endif -->

		<!-- #ifdef APP-PLUS -->
		<view class="container">
			<view class="login_topbpx">
				<view class="login_tit">登录</view>
			</view>
			<view class="tips">
				首次登录快速注册
			</view>
			<view class="main">
				<u-input placeholder="请输入手机号" border="bottom" v-model="phone">
					<text slot="prefix" style="margin-right: 50rpx;">手机号</text>
				</u-input>
			</view>
			<view class="main">
				<u-input placeholder="请输入验证码" border="bottom" v-model="code">
					<text slot="prefix" style="margin-right: 50rpx;">验证码</text>
					<template slot="suffix">
						<u-code
							ref="uCode"
							@change="codeChange"
							seconds="59"
							changeText="X秒重新获取"
						></u-code>
						<u-button
							class="code-btn"
							@tap="getCode"
							:text="tips"
							type="primary"
							shape="circle"
							:plain="true"
						></u-button>
					</template>
				</u-input>
			</view>
			<view style="display: flex; justify-content: flex-end; font-size: 20rpx; color: #666666;">收不到验证码？</view>
			<view class="wrap">
				<u-button shape="circle" @tap="login" type="primary">登录</u-button>
			</view>
			<view style="display: flex;color: #666666;font-size: 15rpx; justify-content: center;">
				<u-checkbox-group>
					<u-checkbox v-model="checked" shape="circle" label="我已阅读并接受" @change="checkedChange"></u-checkbox>
				</u-checkbox-group>
		
				<text @click="yszc()" style="color: #0099ff; font-size: 15px;">《隐私政策》</text>
			</view>
		</view>
		<!-- #endif -->
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: "",
				code: "",
				tips: '',
				seconds: 60,
				apicode: "",
				checked: ""
			}
		},
		methods: {
			ongetphonenumber({
				detail
			}) {
				let self = this;
				if (detail.errMsg === "getPhoneNumber:ok") {
					// this.code = detail.code
					wx.login({
						success(res_login) {
							// 发送用户信息
							self._post(
								"user.user/login", {
									code: res_login.code,
									user_info: JSON.stringify({
										avatarUrl: "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132",
										city: "",
										country: "",
										gender: 2,
										nickName: "微信用户",
										province: "",
									}),
									mobile_code: detail.code,
									encrypted_data: "",
									iv: "",
									signature: "",
									referee_id: uni.getStorageSync("referee_id"),
									source: "wx",
								},
								(result) => {
									// 记录token user_id
									uni.setStorageSync("token", result.data.token);
									uni.setStorageSync("user_id", result.data.user_id);
									// 执行回调函数
									uni.navigateBack();
								},
								false,
								() => {
									uni.hideLoading();
								}
							);
						},
					});
					// this.getAccessToken()
				}
			},
			yhxy() {
				window.open("https://shoujizulin2.rchz.top/service.html")
			},
			yszc() {
				window.open("https://shoujizulin2.rchz.top/privacy.html")
			},
			checkedChange() {
				this.checked = !this.checked;
			},
			gotoindex() {
				uni.navigateBack()
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					if (this.phone == '') {
						uni.showToast({
							title: '手机号不可为空',
							icon: 'none',
						});
					} else if (this.phone != '') {
						var reg = /^1[3456789]\d{9}$/;
						if (!reg.test(this.phone)) {
							uni.showToast({
								title: '请输入有效的手机号码',
								icon: 'none',
							});
						} else {
							uni.showLoading({
								title: '正在获取验证码'
							})
							setTimeout(() => {
								uni.hideLoading();
								// 这里此提示会被this.start()方法中的提示覆盖
								uni.$u.toast('验证码已发送');
								// 通知验证码组件内部开始倒计时
								this.$refs.uCode.start();

								this._post('user.usermp/sendcode', {
									phone: this.phone,
								}, res => {
									console.log(res.data.code);
									this.apicode = res.data.code;
								})
							}, 2000);
						}
					}
				} else {
					// uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				// uni.$u.toast('倒计时结束');
			},
			start() {
				// uni.$u.toast('倒计时开始');
			},
			login() {
				// const origin = window.location.origin;
				console.log(this.phone, this.code);
				if (this.phone == '') {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none',
					});
					return
				} else if (this.code == '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none',
					});
					return
				} else if (this.checked != true) {
					uni.showToast({
						title: '请同意协议书',
						icon: 'none',
					});
					return
				} else if (this.phone != '' && this.code != '') {
					console.log(this.phone, this.code, this.apicode);
					if (this.code == this.apicode) {
						this._post('user.usermp/login_h5', {
							phone: this.phone,
							code: this.code,
						}, res => {
							console.log(res);
							uni.setStorageSync('token', res.data.data.token);
							uni.setStorageSync('user_id', res.data.data.user_id);
							uni.showToast({
								title: '登录成功'
							});
							uni.reLaunch({
								url: '/pages/index/index'
							});
							// if (self.ios()) 
							// 	uni.navigateTo({ url: '/pages/user/index/index' });
							// else 
							//   uni.navigateBack({ delta: 1 });

						})
					} else {
						uni.showToast({
							title: '验证码不正确请重新输入',
							icon: 'none',
						});
					}
				}

			},
		}
	}
</script>
<style lang="scss">
.code-btn {
	width: 150rpx;
	height: 50rpx;
	
	/deep/ .u-button__text {
		font-size: 20rpx !important;
	}
}
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 500rpx;
}

.title {
  font-size: 40rpx;
  color: #585858;
  margin-bottom: 10rpx;
}

.wechatapp {
  padding: 80rpx 0 48rpx;
  border-bottom: 1rpx solid #e3e3e3;
  margin-bottom: 72rpx;
  text-align: center;
}

.wechatapp .header {
  width: 190rpx;
  height: 190rpx;
  border: 2px solid #fff;
  margin: 0rpx auto 0;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 1px 0px 5px rgba(50, 50, 50, 0.3);
}

.auth-title {
  color: #585858;
  font-size: 34rpx;
  margin-bottom: 40rpx;
}

.auth-subtitle {
  color: #888;
  margin-bottom: 88rpx;
  font-size: 28rpx;
}

.login-btn {
  padding: 0 20rpx;
}

.login-btn button {
  height: 88rpx;
  line-height: 88rpx;
  background: #04be01;
  color: #fff;
  font-size: 30rpx;
  border-radius: 999rpx;
  text-align: center;
}

.no-login-btn {
  margin-top: 20rpx;
  padding: 0 20rpx;
}

.no-login-btn button {
  height: 88rpx;
  line-height: 88rpx;
  background: #dfdfdf;
  color: #fff;
  font-size: 30rpx;
  border-radius: 999rpx;
  text-align: center;
}

.mpwx-login {
  margin-top: 400rpx;

  .user-name {
    height: 40rpx;
  }

  .image {
    width: 50rpx;
    height: 50rpx;
  }

  .btn {
    background-color: #09bb07;
    width: 580rpx;
    margin: 80rpx auto 0;
  }
}

.h5-login {
  padding-top: 100rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  box-sizing: border-box;

  .logo {
    width: 280rpx;
    height: 80rpx;
    margin-bottom: 50rpx;
  }

  .input {
    width: 670rpx;
    margin-top: 30rpx;
  }

  .sms-btn {
    border: 1px solid red;
    width: 176rpx;
    height: 60rpx;
    box-sizing: border-box;
  }

  .wx-login {
    margin-top: 60rpx;

    .image {
      margin-top: 40rpx;
      width: 80rpx;
      height: 80rpx;
    }
  }
}
</style>

<style lang="scss">
	.container {
		height: 200rpx;
		padding: 50rpx;
		font-size: 30rpx;
		font-weight: bold;
		font-family: Arial, sans-serif;
		margin: 0 auto;

		.main {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 40rpx 0;

			.text {
				margin-right: 20rpx;
			}
		}
	}

	.wrap {
		padding: 24rpx;
	}


	.login_topbpx {
		padding: 90rpx 0;
		padding-bottom: 110rpx;
	}

	.login_tit {
		font-size: 52rpx;
		font-weight: 600;
		margin-bottom: 33rpx;
	}

	.login_top {
		font-size: 24rpx;
		color: #adafb3;
	}

	.skip {
		position: absolute;
		top: 80rpx;
		right: 30rpx;
		font-size: 28rpx;
		color: #999999;
	}
</style>